<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.min.js"></script>
<div id="main" style="width: 100%;height:400px;"></div>
<div id="mainnews" style="width: 100%;height:400px;"></div>
@php
$d = \Carbon\Carbon::now()->modify('-7 days')->toDateTimeString();
$dc = \App\Models\Auctions\CollectPmHand::where('status', 0)->count();

$da = \App\Models\Auctions\CollectArt::where('art_id', '>',0)->select(\DB::raw("count(*) as num,DATE_FORMAT(updated_at,'%Y-%m-%d') as updated_ats"))->whereDate('updated_at', '>=',$d)->groupBy(\DB::raw("DATE_FORMAT(updated_at,'%Y-%m-%d')"))->get();
$datas = [];
foreach($da as $row)
{
	$datas[$row['updated_ats']] = $row['num'];
}
$ya = \App\Models\Auctions\CollectArt::where('art_id', 0)->count();

$user = \App\Models\AdminRoleUser::where('role_id' ,2)->get();
$news_data = [];
foreach($user as $row)
{
	if(!$row->user)continue;
	for($i=7;$i>0;$i--)
	{
		$tmep = "-$i days";
		$date = \Carbon\Carbon::now()->modify($tmep)->toDateString();
		$temp[$i] = \App\Models\News\News::where('admin_user_id', $row->user_id)->whereDate('created_at', $date)->count();
	}
	$news_data[] = [
		'list' => $temp,
		'name' => $row->user->username
	];
}

@endphp
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '7天内拍卖采集数据'
            },
            tooltip: {},
            // legend: {
                // data:['7天内拍卖采集数据']
            // },
            xAxis: {
                data: [
				@for($i=7;$i>0;$i--)
					@php
					$tmep = "-$i days";
					@endphp
					"{{\Carbon\Carbon::now()->modify($tmep)->toDateString()}}",
				@endfor
					'待采集拍品','待采集拍卖'
				]
            },
            yAxis: {},
            series: [{
                name: '每天采集数量',
                type: 'bar',
                data: [
					@for($i=7;$i>0;$i--)
						@php
						$tmep = "-$i days";
						$date = \Carbon\Carbon::now()->modify($tmep)->toDateString();
						if(isset($datas[$date]))
						{
							$t = $datas[$date];
						}else{
							$t = 0;
						}
							
						@endphp
						"{{$t}}",
					@endfor
						'{{$ya}}','{{$dc}}'
				]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  	</script>
	
	<script>
	var app = echarts.init(document.getElementById('mainnews'));
	var posList = [
		'left', 'right', 'top', 'bottom',
		'inside',
		'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
		'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
	];

	app.configParameters = {
		rotate: {
			min: -90,
			max: 90
		},
		align: {
			options: {
				left: 'left',
				center: 'center',
				right: 'right'
			}
		},
		verticalAlign: {
			options: {
				top: 'top',
				middle: 'middle',
				bottom: 'bottom'
			}
		},
		position: {
			options: echarts.util.reduce(posList, function (map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance: {
			min: 0,
			max: 100
		}
	};

	app.config = {
		rotate: 90,
		align: 'left',
		verticalAlign: 'middle',
		position: 'insideBottom',
		distance: 15,
		onChange: function () {
			var labelOption = {
				normal: {
					rotate: app.config.rotate,
					align: app.config.align,
					verticalAlign: app.config.verticalAlign,
					position: app.config.position,
					distance: app.config.distance
				}
			};
			myChart.setOption({
				series: [{
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}]
			});
		}
	};


	var labelOption = {
		normal: {
			show: true,
			position: app.config.position,
			distance: app.config.distance,
			align: app.config.align,
			verticalAlign: app.config.verticalAlign,
			rotate: app.config.rotate,
			formatter: '{c}  {name|{a}}',
			fontSize: 16,
			rich: {
				name: {
					textBorderColor: '#fff'
				}
			}
		}
	};

	option = {
		title: {
            text: '7天稿件数量'
		},
		color: ['#003366', '#006699', '#4cabce', '#e5323e','#003366','#006699', '#4cabce'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: [
			@foreach($news_data as $k=>$r)
				@if($k>0)
				,
				@endif
				'{{$r["name"]}}'
			@endforeach
			]
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			left: 'right',
			top: 'center',
			feature: {
				mark: {show: true},
				dataView: {show: true, readOnly: false},
				magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				restore: {show: true},
				saveAsImage: {show: true}
			}
		},
		calculable: true,
		xAxis: [
			{
				type: 'category',
				axisTick: {show: false},
				data: [
				@for($i=7;$i>0;$i--)
					@php
					$tmep = "-$i days";
					@endphp
					"{{\Carbon\Carbon::now()->modify($tmep)->toDateString()}}",
				@endfor
				]
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
		@foreach($news_data as $k=>$r)
			@if($k>0)
			,
			@endif
			{
				name: '{{$r["name"]}}',
				type: 'bar',
				@if($k==0)
				barGap: 0,
				@endif
				label: labelOption,
				data: [
				@foreach($r['list'] as $ke=>$r)
				@if($ke<7)
				,
				@endif
				{{$r}}
				@endforeach
				]
			}
		@endforeach
		]
	};
	
	app.setOption(option);
	</script>